import dateUtil from "@/utils/myutils.js"

//OEE时序图
const sequenceOption = (echarts,chartData,statisticsList) => {
    let data = [];
    const startTime = 0;
    const categories = [''];
    const types = [{
            name: '离线',
            color: '#999999'
        },
        {
            name: '故障',
            color: '#990000'
        },
        {
            name: '等待',
            color: '#FF9900'
        },
        {
            name: '运行',
            color: '#339900'
        },
        {
            name: '关机',
            color: '#999999'
        }
    ];
    echarts.util.each(categories, function (category, index) {
        let baseTime = startTime;
        for (var i = 0; i < chartData.length; i++) {
            let targetIndex = types.findIndex(type => type.name == chartData[i].name)
            if(targetIndex != -1){
                data.push({
                    name: types[targetIndex].name,
                    value: [
                        index,
                        baseTime,
                        baseTime += chartData[i].durationSecond,
                        chartData[i].durationSecond,
                        chartData[i].startTime,
                        chartData[i].endTime
                    ],
                    itemStyle: {
                        normal: {
                            color: types[targetIndex].color
                        }
                    }
                })
            }
        }
    });
    //设定图形效果
    function renderItem(params, api) {
        var categoryIndex = api.value(0);
        var start = api.coord([api.value(1), categoryIndex]);
        var end = api.coord([api.value(2), categoryIndex]);
        var height = api.size([0, 1])[1] * 0.2;

        var rectShape = echarts.graphic.clipRectByRect({
            x: start[0],
            y: 125,
            width: end[0] - start[0],
            height: height
        }, {
            x: params.coordSys.x,
            y: params.coordSys.y,
            width: params.coordSys.width,
            height: params.coordSys.height
        });

        return rectShape && {
            type: 'rect',
            shape: rectShape,
            style: api.style()
        };

    }
    let option = {
        //鼠标提示
        tooltip: {
            formatter: function (params) {
                return params.marker + params.name + ':  ' + params.value[3] + ' s' + '<br/>'
                    + params.marker + '运行时间' + ':  ' + params.value[4] + '  -  ' + 
                    params.value[5]
            }
        },
        // legend: {
        //     show: true,
        //     data: ['离线', '故障', '等待', '运行', '关机'],
        //     bottom: 0,
        //     left: 'center'
        // },
        //缩放
        dataZoom: [{
            type: 'slider',
            show: false,
            filterMode: 'weakFilter',
            showDataShadow: false,
            top: 550,
            height: 10,
            borderColor: 'transparent',
            backgroundColor: '#e2e2e2',
            handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', //jshint ignore:line
            handleSize: 20,
            handleStyle: {
                shadowBlur: 6,
                shadowOffsetX: 1,
                shadowOffsetY: 2,
                shadowColor: '#aaa'
            },
            labelFormatter: '',
            start: 0,
            end: 70,
        }, {
            type: 'inside',
            filterMode: 'weakFilter'
        }],
        grid: {
           top:'2%',
           bottom:'30px'
        },
        xAxis: {
            min: startTime,
            scale: true,
            axisLabel: {
                formatter: function (val) {
                    return val + 's';
                },
                textStyle:{
                    color:'#333'
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle:{
                    color:'#e0e6f1'
                }
            }
        },
        yAxis: {
            data: categories,
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle:{
                    color:'#e0e6f1'
                }
            }
        },

        series: [{
                name: '离线',
                type: 'custom',
                renderItem: renderItem,
                itemStyle: {
                    opacity: 0.8,
                    color: "#999999"
                },
                encode: {
                    x: [1, 2],
                    y: 0
                },
                data: data
            },
            {
                name: '故障',
                type: 'custom',
                renderItem: renderItem,
                itemStyle: {
                    opacity: 0.8,
                    normal: {
                        color: "#990000",
                        borderWidth: 2
                    }
                },
                encode: {
                    x: [1, 2],
                    y: 0
                },
                data: data
            },
            {
                name: '等待',
                type: 'custom',
                renderItem: renderItem,
                itemStyle: {
                    opacity: 0.8,
                    normal: {
                        color: "#FF9900",
                        borderWidth: 2
                    }
                },
                encode: {
                    x: [1, 2],
                    y: 0
                },
                data: data
            },
            {
                name: '运行',
                type: 'custom',
                renderItem: renderItem,
                itemStyle: {
                    opacity: 0.8,
                    normal: {
                        color: "#339900",
                        borderWidth: 2
                    }
                },
                encode: {
                    x: [1, 2],
                    y: 0
                },
                data: data
            },
            {
                name: '关机',
                type: 'custom',
                renderItem: renderItem,
                itemStyle: {
                    opacity: 0.8,
                    normal: {
                        color: "#999999",
                        borderWidth: 2
                    }
                },
                encode: {
                    x: [1, 2],
                    y: 0
                },
                data: data
            }
        ]
    }
    return option
}

export {
    sequenceOption
}